<template>
  <div
    :class="`node-box ${selected ? 'node-box-selected' : ''}`"
    :data-type="data.type || ''"
    @mousedown="handleMousedown($event)"
    @mouseup="handleMouseup($event)"
    @click="handleNodeClick($event)"
  >
    <div class="icon-box">
      <i v-if="data.icon" class="icon">
        <img :src="isObject(data.data.icon) ? data.icon.url : data.icon" :alt="data.label" />
      </i>
      <a-icon v-else class="icon" type="smile" />
    </div>
    <label class="label">{{ data.label }}</label>
  </div>
</template>

<script lang="ts" setup>
import { isObject } from 'lodash'

interface IProps {
  data: Record<string, any>
  selected: boolean
}

withDefaults(defineProps<IProps>(), {
  data: () => ({}),
  selected: false
})

const emits = defineEmits(['mousedown', 'mouseup', 'click'])

const handleMousedown = (e: MouseEvent) => {
  emits('mousedown', e)
}
const handleMouseup = (e: MouseEvent) => {
  emits('mouseup', e)
}
const handleNodeClick = (e: MouseEvent) => {
  emits('click', e)
}
</script>

<style lang="scss">
.node-box {
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px 0;
  cursor: pointer;

  &:hover {
    .icon-box {
      background-color: #0000000f;
    }
  }

  &.node-box-selected {
    .icon-box {
      border: 1px solid #000;
    }
    .label {
      color: #000;
    }
  }

  .icon-box {
    width: 48px;
    background-color: #00000008;
    white-space: break-spaces;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon,
    img {
      width: 100%;
      height: 100%;
    }
  }
  .label {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #00000080;
    text-align: center;
  }

  &.plain {
    cursor: default;
    pointer-events: none;
    .icon-box {
      border: 0;
      background-color: #fff;
      .icon {
        display: none;
      }
    }
    .label {
      color: #fff;
    }
  }
}
</style>
